<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>葡萄藤PPT</title>
    <link rel="stylesheet" href="../css/reveal/reveal.css">
    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="../css/reveal/theme/ptt.css">
    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="../lib/reveal/css/zenburn.css">
    <!-- 打印和PDF输出样式 -->
    <script>
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = window.location.search.match(/print-pdf/gi) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
    document.getElementsByTagName('head')[0].appendChild(link);
    </script>
</head>

<body>
    <img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
    <map name="pttmap">
        <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank" />
    </map>
    <div class="reveal">
        <div class="slides">
            <section>
                <h2>JS中this的指向</h2>
                <p>分享人：王栋</p>
            </section>
            <section>
                <p>1.背景介绍</p>
                <p>2.知识剖析</p>
                <p>3.常见问题</p>
                <p>4.解决方案</p>
                <p>5.编码实战</p>
                <p>6.扩展思考</p>
                <p>7.参考文献</p>
                <p>8.更多讨论</p>
            </section>
            <section>
                <h3>1.背景介绍</h3>
            </section>
            <section>
                <p>在javaScript中，this是动态绑定的，它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。
                    这就导致了this具备了多重含义，可以使得this可以更灵活地使用。
                    但是，带来了灵活性的同时也会给我们初学者带来不少困惑。
                    简而言之, this 是一个特殊的标识符关键字 —— 在每个 function 中自动根据作用域(scope) 确定,
                    指向的是此次调用的 “所有者,owner”。</p>
            </section>
            <section>
                <h3>2.知识剖析</h3>
            </section>
            <section>
                <p>在全局函数中，this就是window，当函数被作为某个对象的方法调用时，this就是那个对象，
                    匿名函数的执行具有全局性，也就是说，匿名函数this指向window。</p>
            </section>
            <section>
                <h3>this的常见的四种情形</h3>
                <ul>  <li>1.纯粹的作为函数调用：全局函数中，this指向window</li>
                    <li>2.作为对象方法的调用：当函数被作为某个对象的方法调用时，this就是那个对象</li>
                    <li>3.作为构造函数调用：this指向新对象</li>
                    <li>4. apply、call调用：this指向改变后的调用这个函数的对象</li></ul>

            </section>
           <section>
                <p>全局环境中的this</p>
                <pre>
                <code>
                    function a(){
                        console.log(this);
                    }
                    a();
                </code>
                </pre>
                <p>这里调用了a函数，而a函数的执行环境是全局环境，这里的this也就指向了全局变量window。</p>
            </section>
            <section>
                <p>严格模式 ‘use strict’下的this</p>
                <pre>
                <code>
                  'use strict';
                   function a(){
                        this.user = "hello";
                        console.log(this);
                        console.log(this.user);
                    }
                    a();
                    console.log(user)
                </code>
                </pre>
                <p>原因：严格模式下这种调用方式会报错，如果不用严格模式，可能你不知不觉中就定义了几个全局变量。</p>
            </section>
            <section>
                <p>在javaScript中，不一定只有对象方法的上下文中才有this， 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。JavaScript 中函数的调用有以下几种方式：作为对象方法调用，作为函数调用，作为构造函数调用，和使用 apply 或 call 调用。</p>
            </section>
            <section>
                <p>1.作为对象方法调用:this指向该对象本身</p>
                <pre>
                <code>
                var point = { 
                x : 0, 
                y : 0, 
                moveTo : function(x, y) {
                    console.log(this);
                    this.x = this.x + x; 
                    this.y = this.y + y; 
                    } 
                };
                point.moveTo(1, 1);
                console.log(point.x);

                      var car = {
                    brand: "Nissan",
                    getBrand: function(){
                    console.log(this.brand);
                    console.log(this);
                    console.log(this===car);
                    }
                    };
                    car.getBrand();
                    var brand = 'Nissan';
                     var myCar = {brand: 'Honda'};
                  var getBrand = function() {
                  console.log(this.brand);
                 };
                 myCar.getBrand = getBrand;
                 myCar.getBrand();
                 // output: Honda
                getBrand();
              // output: Nissan
                </code>
            </pre>
            </section>
            <section>
                <p>2.作为函数调用:this指向全局对象</p>
                <pre>
                <code>
                  function a(x) {
                  this.x = x; 
                  }
                  a(5);
                  console.log(this.x);
                  console.log(x)
                  console.log(window.x)
                </code>
                </pre>
            </section>
            <section>
                <p>3.作为构造函数调用:this 绑定到新创建的对象上</p>
                <pre>
                <code>
                function Point(){
                   this.x = 1;
                }
                var a = new Point;
                console.log(a.x)
                    　　var x = 2;
　           　function test(){
　　　　          this.x = 1;
　                           　}
　           　var a = new test();
               console.log(a.x)
               console.log(x)
                </code>
                </pre>
                <p>注：构造函数不使用new调用，则和普通函数一样。一般地，构造函数首字母大写</p>
            </section>
            <section>
                <p>4.使用 apply 或 call 调用：当使用apply和call时，表示把一个函数表达式放入call或apply括号后面的第一个参数的环境中，
                    this则指向这个参数；两者不同的地方在于apply第二个参数必须是个数组。简言之就是apply或者call谁，this就指向谁</p>
                <pre>
                <code>
                   function Point(x, y){ 
                      this.x = x; 
                      this.y = y; 
                      this.moveTo = function(x, y){ 
                          this.x = x; 
                          this.y = y; 
                      } 
                   }
                   var p1 = new Point(0, 0);
                    console.log(p1);
                   var p2 = {x: 0, y: 0}; 
                   p1.moveTo(1, 1);
                    console.log(p1);
                   p1.moveTo.apply(p2, [10, 10]);
                    console.log(p1);
                    console.log(p2);
                </code>
                </pre>
            </section>
            <section>
                <h3>3、常见问题</h3>
            </section>
            <section>
                <pre>
                <code>
                var obj = {
                      name: 'qiutc',
                         foo: function() {
                        console.log(this);
                        },
                      foo2: function() {
                  console.log(this);
                 setTimeout(this.foo, 1000);
                        }
                           }
                          obj.foo2();
                </code>
                </pre>
                <p>异步回调函数中的this指向问题，现象：两次打印的this不一样</p>
            </section>
            <section>
                <pre>
                <code>
                 'use strict';
               var obj = {
                      name: 'qiutc',
                         foo: function() {
                        console.log(this);
                        },
                      foo2: function() {
                  console.log(this);
                 setTimeout(this.foo, 1000);
                        }
                           }
                          obj.foo2();

                </code>
                </pre>
                <p>现象：加了严格模式，this仍然指向了window</p>
            </section>
            <section>
                <p>setTimeout()其实全名为window.setTimeout()，是window下面的一个方法，不管是否是严格模式，指向的都是window。</p>
            </section>
            <section>
                <h3>4、解决方案</h3>
            </section>
            <section>
                <p>1.将this赋给一个变量，然后通过闭包来访问这个变量来打印出我们想要的值。</p>
                <pre>
                <code>
          var obj = {
  name: 'qiutc',
  foo: function() {
    console.log(this);
  },
  foo2: function() {
    console.log(this);
    var _this = this;
    setTimeout(function() {
      console.log(this);  // Window
      console.log(_this);  // Object {name: "qiutc"}
    }, 1000);
  }
}
obj.foo2();
                </code>
                </pre>
            </section>
            <section>
                <p>2.使用bind()将执行环境放到obj这个对象中去，可以用this代替。</p>
                <pre>
                <code>
                          var obj = {
                            name: 'qiutc',
                            foo: function() {
                            console.log(this);
                        },
                          foo2: function()
                          var _this = this;
                         setTimeout(function() {
                    console.log(this);  //Object {name: "qiutc"}
                        }.bind(this), 1000);
                     }
                        }
                       obj.foo2();
                </code>
                </pre>
            </section>
            <section>
                <p>3.使用ES6中的箭头函数。</p>
                <pre>
                <code>
           var obj = {
  name: 'qiutc',
  foo: function() {
    console.log(this);
  },
  foo2: function() {
    console.log(this);
    setTimeout(() => {
      console.log(this);  // Object {name: "qiutc"}
    }, 1000);
  }
}
obj.foo2();
                </code>
                </pre>
                <p>箭头函数中的 this 只和定义它时候的作用域的 this 有关，而与在哪里以及如何调用它无关，同时它的 this 指向是不可改变的。</p>
            </section>
            <section>
                <h3>5、编码实战</h3>
            </section>
            <section>
                    <pre>
                        <code>
                            window.val = 1;
                            var obj = {
                                val: 2,
                                dbl: function () {
                                    this.val *= 2;
                                    val *= 2;
                                    console.log(val);
                                    console.log(this.val);
                                }
                            };
                            // 说出下面的输出结果
                            obj.dbl();
                            var func = obj.dbl;
                            func()
                        </code>
                    </pre>
            </section>

            <section>
                <h3>6.扩展思考</h3>
            </section>
            <section>
                <p>问题：如何了解this到底指向谁？</p>
                <p class="fragment" >

                    <p style="text-align: left">1.当函数作为对象的方法调用时，this指向该对象。</p>

                    <p style="text-align: left">2.当函数作为单独函数调用时，this指向全局对象（严格模式时，为undefined）</p>

                    <p style="text-align: left">3.构造函数中的this指向新创建的对象</p>

                    <p style="text-align: left">4.嵌套函数中的this不会继承上层函数的this，可以用前面讲过的三种方法来使this指向宿主对象。
                        apply和call，bind调用或者绑定的this，指向相应的对象</p>
            </section>
            <section>
                <h3>7.参考文献</h3>
            </section>
            <section>
                <p>参考一：<a href="https://www.ibm.com/developerworks/cn/web/1207_wangqf_jsthis/">深入浅出 JavaScript 中的 this</a></p>
                <p>参考二：<a href="https://qiutc.me/post/this-this-this-in-javascript.html">JavaScript 中的 this !</a></p>
                <p>参考三：<a href="http://caibaojian.com/toutiao/6859">JavaScript中的this用法与指向</a></p>
                <p>参考四：<a href="https://www.zhihu.com/question/19636194">如何理解 JavaScript 中的 this 关键字？</a></p>
            </section>
            <section>
                <h3>8、更多讨论</h3>
                <!--<p><a href="http://www.imooc.com/article/1848">资料链接</a></p>-->
                关于this的指向问题大家还有什么好的见解？
            </section>
            <section>
                <h4>鸣谢</h4>
                <p>感谢大家观看</p>
                <p><small>BY : 姚磊 | 王栋</small></p>
            </section>
        </div>
    </div>
    <script src="../lib/reveal/js/head.min.js"></script>
    <script src="../lib/reveal/reveal.js"></script>
    <script>
    // 以下为常见配置属性的默认值
    // {
    //  controls: true, // 是否在右下角展示控制条
    //  progress: true, // 是否显示演示的进度条
    //  slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
    //  history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
    //  keyboard: true, // 是否启用键盘快捷键来导航
    //  overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
    //  center: true, // 是否将幻灯片垂直居中
    //  touch: true, // 是否在触屏设备上启用触摸滑动切换
    //  loop: false, // 是否循环演示
    //  rtl: false, // 是否将演示的方向变成RTL，即从右往左
    //  fragments: true, // 全局开启和关闭碎片。
    //  autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
    //  transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
    //  transitionSpeed: 'default', // 过渡速度，default/fast/slow
    //  mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
    // }

    // 初始化幻灯片
    Reveal.initialize({
        history: true,
        dependencies: [{
            src: '../plugin/markdown/marked.js'
        }, {
            src: '../plugin/markdown/markdown.js'
        }, {
            src: '../plugin/notes/notes.js',
            async: true
        }, {
            src: '../plugin/highlight/highlight.js',
            async: true,
            callback: function() {
                hljs.initHighlightingOnLoad();
            }
        }]
    });
    </script>
</body>

</html>
